<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
	
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>警员信息</title>
<link href="${APP_PATH}/static2/css/style.css" rel="stylesheet"
	type="text/css" />
<script type="text/javascript" src="${APP_PATH}/static2/js/jquery.js"></script>
<link href="${APP_PATH}/static2/jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css" rel="stylesheet"/>
<script src="${APP_PATH}/static2/jquery-jbox/2.3/jquery.jBox-2.3.min.js" type="text/javascript"></script>
<script language="javascript">
jQuery(function() {
		//导航切换
		$(".imglist li").click(function() {
			$(".imglist li.selected").removeClass("selected")
			$(this).addClass("selected");
		})
	})
</script>
<script type="text/javascript">
var totalrecord;
	$(document).ready(function() {
		$("#cardRedInfo_add_modal_btn").click(function() {
			$("#cardRedInfoAddModal form")[0].reset();
			$("#cardRedInfoAddModal").fadeIn(200);
		});
		$("#cardRedInfo_update_modal_btn").click(function() {
			var checkboxs=$("input:checkbox[name='cardRedInfoCheckbox']:checked");
			//alert(checkboxs.length);
			if(checkboxs.length!=1){
				alert("请选择一条数据！");
				return false;
			}
			var cardRedInfoId=checkboxs.attr("dataId");
			//alert(cardRedInfoId)
			$("#cardRedInfoUpdateModal form")[0].reset();
			getCardRedInfo(cardRedInfoId);
			$("#cardRegInfo_update_btn").attr("dataId",cardRedInfoId);
			$("#cardRedInfoUpdateModal").fadeIn(200);
		});
		$("#cardRedInfo_add_btn").click(function(){
			if(validate_add_form()==false){
				return;
			}
			var isAddContinue=$("#isAddContinue").attr("checked");
			document.getElementById("cardRedInfo_add_btn").disabled = true;
			$.ajax({
				url:"${APP_PATH}/card/cardRegInfo/save",
				type:"post",
				data:$("#cardRedInfoAddModal form").serialize(),
				success:function(result){
					document.getElementById("cardRedInfo_add_btn").disabled = false;
					//alert(result.msg);
					if(result.code="100"){
						//$('#cardRedInfoAddModal').fadeOut(200);
						if(isAddContinue){
							//$("#cardRedInfoAddModal form")[0].reset();
							//清空
							$("#cardNo1_add_input_id").val("");
							$("#cardNo2_add_input_id").val("");
							$("#cardType_add_select_Id").val("");
							$.jBox.info("添加成功!","成功" );
						}else{
						to_page(1);
						}
					}
				},
				error:function(){
					document.getElementById("cardRedInfo_add_btn").disabled = false;
					alert("操作失败：系统异常");
				}
			});
		});
		//双击行（tr）,弹出修改按钮
		$("#list tr").dblclick(function(){
			//获取双击行的checkbox的dataID
			var checkboxObj=$(this).find("input:checkbox[name='cardRedInfoCheckbox']");
			var dataId=checkboxObj.attr("dataId");
			$("#cardRedInfoUpdateModal form")[0].reset();
			getCardRedInfo(dataId);
			$("#cardRegInfo_update_btn").attr("dataId",dataId);
			$("#cardRedInfoUpdateModal").fadeIn(200);
		});
		$("#cardRegInfo_update_btn").click(function(){
			if(validate_update_form()==false){
				return;
			}
			document.getElementById("cardRegInfo_update_btn").disabled = true;
			//保存更新
			$.ajax({
				url:"${APP_PATH}/card/cardRegInfo/save?cardID="+$(this).attr("dataId"),
				type:"post",
				data:$("#cardRedInfoUpdateModal form").serialize(),
				success:function(result){
					document.getElementById("cardRegInfo_update_btn").disabled = false;
					$('#cardRedInfoUpdateModal').fadeOut(200);
					to_page(1)
					},
					error:function(){
						document.getElementById("cardRegInfo_update_btn").disabled = false;
						alert("操作失败：系统异常");
					}
				
			});
		});
		$(".tiptop a").click(function() {
			$(".tip").fadeOut(200);
			to_page(1);
		});

		$(".cancel").click(function() {
			$(".tip").fadeOut(100);
			to_page(1);
		});
		$("#shanchu").click(function() {
			delcardRedInfos();
		});
		var pageInfoJson=${pageInfoJson};
		build_page_nav(pageInfoJson);

	});
	//删除
	function delcardRedInfos(){
		var ids="";
		var checkboxs=$("input:checkbox[name='cardRedInfoCheckbox']:checked");
		//alert(checkboxs.length);
		if(checkboxs.length<1){
			alert("请至少选择一条数据！");
			return false;
		}
		var r=confirm("确定要删除吗？")
		if(r==false){
			return;
		}
		$.each(checkboxs, function(index, item) {
			ids=ids+$(item).attr("dataId")+","
		});
		if(ids.indexOf(",")!=-1){
			ids=ids.substring(0,ids.length-1);
		}
		//删除
		$.ajax({
			url:"${APP_PATH}/card/cardRegInfo/delete",
			type:"post",
			data:{'ids':ids},
			success:function(result){
				$('#cardRedInfoUpdateModal').fadeOut(200);
				to_page(1)
				}
			
		});
		
	}
</script>
<script type="text/javascript">
function getCardRedInfo(id){
	$.ajax({
		url:"${APP_PATH}/card/cardRegInfo/getCardRegInfo?cardID="+id,
		type:"get",
		success:function(result){
			$("#cardNo1_update_input").val(result.cardNo1);
			$("#cardNo2_update_input").val(result.cardNo2);
			//$("#select_id").val([result.cardType]);
			$("#select_id option[value='"+result.cardType+"']").attr("selected","selected");
		}
	});
}
function to_page(n){
    $("#pageNo").val(n);
    $("#searchForm").submit();
    return false;
}
function build_page_nav(pageInfo) {
	//$("#page_info_nav").empty();
	totalrecord=pageInfo.pages;
	var ul=$("#pageInfoId");
	ul.empty();
	var firstPageLi =$("<li></li>").addClass("paginItem").append($("<a ></a>").append("首页").attr("href","javascript:;"));
	var prePageLi =$("<li></li>").addClass("paginItem").append($("<a href='javascript:;'></a>").append("&laquo;"));
	if(pageInfo.hasPreviousPage==false){
		firstPageLi.addClass("disabled");
		prePageLi.addClass("disabled");
	}else{
		firstPageLi.click(
				function(){
					to_page(1);
				}		
				);
				prePageLi.click(
						function(){
							to_page(pageInfo.pageNum-1);
						});
	}
	
	var nextPageLi =$("<li></li>").addClass("paginItem").append($("<a href='javascript:;'></a>").append("&raquo;"));
	var lastPageLi =$("<li></li>").addClass("paginItem").append($("<a href='javascript:;'></a>").append("尾页").attr("href","#"));
	if(pageInfo.hasNextPage==false){
		nextPageLi.addClass("disabled");
		lastPageLi.addClass("disabled");
	}else{
		nextPageLi.click(function(){
			to_page(pageInfo.pageNum+1);
		});
		lastPageLi.click(function(){
			to_page(pageInfo.pages);
		});
	}
	
	ul.append(firstPageLi).append(prePageLi);
	$.each(pageInfo.navigatepageNums, function(index, item) {
			var numLi = $("<li></li>").addClass("paginItem").append($("<a href='javascript:;'></a>").append(item));
			if(pageInfo.pageNum == item){
				numLi.addClass("current");
			}
			numLi.click(function(){
				to_page(item);
			});
			ul.append(numLi);
		});
	ul.append(nextPageLi).append(lastPageLi);
    ul.appendTo("#page_info_nav");
}
</script>
<style type="text/css">
.disabled{
    cursor: not-allowed;
    background-color: #eee;
    opacity: 1;
    color: #737373 !important;
}
.disabled a{
color: #737373 !important;}
.checkbox{
    width: 15px;
    height: 15px;
    background-color: #fff;
    margin-top:8px;
    margin-left:0 !important;
}
.tip{
 width:530px;
 height:420px;
}
.requiedCss{
display:inline;
/* float:left; */
color:red;
}
</style>
</head>
<body>
	<div class="place">
		<span>卡号信息</span>
	</div>
	<div class="rightinfo">
	<form:form id="searchForm" modelAttribute="cardRegInfo" action="${APP_PATH}/card/cardRegInfo/list" method="post">
   <input id="isLeave" name="isLeave" type="hidden" value="0"/>
    <input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
	</form:form>
		<div class="tools">
			<ul class="toolbar">
				<li id="cardRedInfo_add_modal_btn"><span><img src="${APP_PATH}/static/images/t01.png" /></span>添加</li>
				<li id="cardRedInfo_update_modal_btn"><span><img src="${APP_PATH}/static/images/t02.png" /></span>修改</li>
				<li id="shanchu"><span><img src="${APP_PATH}/static/images/t03.png" /></span>删除</li>
			</ul>
		</div>
		<table class="imgtable" id="list">
			<tr class="imgtable1">
				<th width="60px;">序号</th>
				<th width="60px;">选择</th>
				<th>13.56M卡号</th>
				<th>2.4G卡号</th>				
				<th>卡号类型</th>
			</tr>
		<c:forEach items="${pageInfo.list}" var="cardRegInfo" varStatus="pageList">
			<tr>
			    <td>${(pageInfo.pageNum - 1) * pageInfo.pageSize + pageList.index + 1}</td>
				<td class="imgtd"><input type="checkbox" name="cardRedInfoCheckbox" dataId="${cardRegInfo.cardID}"></td>
				<td>${cardRegInfo.cardNo1}</td>
				<td>${cardRegInfo.cardNo2}</td>
				<td>${cardRegInfo.cardType==0?'警员卡':'被审讯人腕带'}</td>
			</tr>
			</c:forEach>
		</table>
		<div class="pagin">
			<div class="message">
				当前显示第&nbsp;<i class="blue">${pageInfo.pageNum}&nbsp;</i>页,共<i class="blue">${pageInfo.pages}</i>页,共<i class="blue">${pageInfo.total}</i>条记录，
			</div>
			<ul id="pageInfoId" class="paginList">
				<li class="paginItem"><a href="javascript:;"><span
						class="pagepre"></span></a></li>
				<li class="paginItem"><a href="javascript:;">1</a></li>
				<li class="paginItem current"><a href="javascript:;">2</a></li>
				<li class="paginItem"><a href="javascript:;">3</a></li>
				<li class="paginItem"><a href="javascript:;">4</a></li>
				<li class="paginItem"><a href="javascript:;">5</a></li>
				<li class="paginItem more"><a href="javascript:;">...</a></li>
				<li class="paginItem"><a href="javascript:;">10</a></li>
				<li class="paginItem"><a href="javascript:;"><span
						class="pagenxt"></span></a></li>
			</ul>
		</div>
    <!-- 修改卡号 -->
		<div class="tip" id="cardRedInfoUpdateModal">
			<div class="tiptop">
				<span>卡号修改</span><a></a>
			</div>
			<div style="height: 20px"></div>
			<div class="formbody">
			<form>
				<ul class="forminfo">
					<li><label><span class="requiedCss">*</span>13.56M卡号</label>
					<input name="cardNo1" type="text" maxlength=30 class="dfinput" id="cardNo1_update_input"/>
						</li>
				    <li><label><span class="requiedCss">*</span>2.4G卡号</label> 
					<input name="cardNo2" type="text" maxlength=30 class="dfinput" id="cardNo2_update_input"/></li>
				
					<li><label><span class="requiedCss">*</span>卡号类型</label>
						<select name="cardType" id="select_id"
						style="background-color: #E6E6E6; width: 150px; height: 30px; padding-left: 5px; line-height: 30px">
							<option value ="0">警员卡</option>
							<option value ="1">被审讯人腕带</option>
					</select>
						</li>
				</ul>
			</form>
			</div>
			<div class="tipinfo">
				<span><img src="${APP_PATH}/static2/images/ticon.png" /></span>
				<div class="tipright">
					<p>是否确认注册 ？</p>
					<cite>如果是请点击确定按钮 ，否则请点取消。</cite>
				</div>
			</div>
			<div class="tipkpzc">
				<input name="" type="button" class="sure" id="cardRegInfo_update_btn" value="确认修改" /> &nbsp; <input
					name="" type="button" class="cancel"  value="取消" />
			</div>
		</div>
		<!--  -->
    <!-- 添加卡号 -->
<!--添加卡号 开始-->
	<div class="tip" id="cardRedInfoAddModal">
			<div class="tiptop">
				<span>卡号注册</span><a></a>
			</div>
			<div style="height: 20px"></div>
			<div class="formbody">
			<form>
				<ul class="forminfo">
						<li><label><span class="requiedCss">*</span>13.56M卡号</label>
						<input name="cardNo1" type="text" maxlength=30 id="cardNo1_add_input_id" class="dfinput" />
						</li>
						<li><label><span class="requiedCss">*</span>2.4G卡号</label> 
					<input name="cardNo2" type="text" maxlength=30 id="cardNo2_add_input_id"class="dfinput" /></li>
					<li><label><span class="requiedCss">*</span>卡号类型</label>
						<select name="cardType" id="cardType_add_select_Id"
						style="background-color: #E6E6E6; width: 150px; height: 30px; padding-left: 5px; line-height: 30px">
							<option value ="0">警员卡</option>
							<option value ="1">被审讯人腕带</option>
					</select>
					</li>
					<li >
					  <label>连续添加</label>
					  <input type="checkbox" class="checkbox" style="margin-left:20px;" name="" id="isAddContinue">
					</li>
				</ul>
			</form>
			</div>
			<div class="tipinfo">
				<span><img src="${APP_PATH}/static2/images/ticon.png" /></span>
				<div class="tipright">
					<p>是否确认注册 ？</p>
					<cite>如果是请点击确定按钮 ，否则请点取消。</cite>
				</div>
			</div>
			<div class="tipkpzc">
				<input name="" type="button" class="sure" id="cardRedInfo_add_btn" value="添加" /> &nbsp; <input
					name="" type="button" class="cancel"  value="取消" />
			</div>
		</div>
	</div>
	<script type="text/javascript">
	function validate_update_form(){
		var cardID =$("#cardRegInfo_update_btn").attr("dataId");
		var cardNo1=$("#cardNo1_update_input").val();
		var cardNo2=$("#cardNo2_update_input").val();
		if(cardNo1==""||cardNo1==null){
			show_validate_msg("13.56M卡号不能为空！");
			return false;
		}
		var regpoliceNo=/^[0-9a-zA-Z_]{1,}$/;
			if(!regpoliceNo.test(cardNo1)){
			show_validate_msg("13.56M卡号必须为字母数字或下划线！");
							return false;
				}
		if(validate_update_CardNo1(cardNo1,cardID)==true){
				show_validate_msg("13.56M卡号已注册！");
				return false;
		}
		if(cardNo2==""||cardNo2==null){
			show_validate_msg("2.4G卡号不能为空！");
			return false;
		}
		var regpoliceNo2=/^[0-9a-zA-Z_]{1,}$/;
			if(!regpoliceNo.test(cardNo2)){
			show_validate_msg("2.4G卡号必须为字母数字或下划线！");
							return false;
				}
		if(validate_update_CardNo2(cardNo2,cardID)==true){
				show_validate_msg("2.4G卡号已注册！");
				return false;
		}
		return true;
	}
	function validate_add_form(){
			var cardNo1=$("#cardNo1_add_input_id").val();
			var cardNo2=$("#cardNo2_add_input_id").val();
			if(cardNo1==""||cardNo1==null){
				show_validate_msg("13.56M卡号不能为空！");
				return false;
			}
			var regpoliceNo=/^[0-9a-zA-Z_]{1,}$/;
				if(!regpoliceNo.test(cardNo1)){
				show_validate_msg("13.56M卡号必须为字母数字或下划线！");
								return false;
					}
			if(validate_policeCardNo1(cardNo1)==true){
					show_validate_msg("13.56M卡号已注册！");
					return false;
			}
			if(cardNo2==""||cardNo2==null){
				show_validate_msg("2.4G卡号不能为空！");
				return false;
			}
			var regpoliceNo2=/^[0-9a-zA-Z_]{1,}$/;
				if(!regpoliceNo.test(cardNo2)){
				show_validate_msg("2.4G卡号必须为字母数字或下划线！");
								return false;
				}
			if(validate_policeCardNo2(cardNo2)==true){
					show_validate_msg("2.4G卡号已注册！");
					return false;
			}
			return true;
		}
	//ajax校验，卡号1.是否存在
		function validate_policeCardNo1(cardNoValue){
			var policeCardNo1flag=true;
			$.ajax({
				url:"${APP_PATH}/card/cardRegInfo/isExsitCardNo",
				type:"post",
				 cache: false,
			     async: false,
				data:{"cardNo1":cardNoValue},
				success:function(result){
					if(result.code!=100){
						policeCardNo1flag=false;
				}
			 },
			 error: function() { 
				 show_validate_msg("验证失败!,请联系管理员");
				} 
			});
			return policeCardNo1flag;
		}
		function validate_policeCardNo2(cardNoValue){
			var policeCardNo1flag=true;
			$.ajax({
				url:"${APP_PATH}/card/cardRegInfo/isExsitCardNo",
				type:"post",
				 cache: false,
			     async: false,
				data:{"cardNo2":cardNoValue},
				success:function(result){
					if(result.code!=100){
						policeCardNo1flag=false;
				}
			 },
			 error: function() { 
				 show_validate_msg("验证失败!,请联系管理员");
				} 
			});
			return policeCardNo1flag;
		}
		function validate_update_CardNo1(cardNoValue,cardID){
			var policeCardNo1flag=true;
			$.ajax({
				url:"${APP_PATH}/card/cardRegInfo/validateUpdateCardNo",
				type:"post",
				 cache: false,
			     async: false,
				data:{"cardNo1":cardNoValue,"cardID":cardID},
				success:function(result){
					if(result.code!=100){
						policeCardNo1flag=false;
				}
			 },
			 error: function() { 
				 show_validate_msg("验证失败!,请联系管理员");
				} 
			});
			return policeCardNo1flag;
		}
		function validate_update_CardNo2(cardNoValue,cardID){
			var policeCardNo1flag=true;
			$.ajax({
				url:"${APP_PATH}/card/cardRegInfo/validateUpdateCardNo",
				type:"post",
				 cache: false,
			     async: false,
				data:{"cardNo2":cardNoValue,"cardID":cardID},
				success:function(result){
					if(result.code!=100){
						policeCardNo1flag=false;
				}
			 },
			 error: function() { 
				 show_validate_msg("验证失败!,请联系管理员");
				} 
			});
			return policeCardNo1flag;
		}
		function show_validate_msg(msg){
			var extendMsg="<span style='font-weight:bold; font-size:14px'>"+msg+"</span>";
			$.jBox.info(msg,"错误" );
		}
		</script>
		<!--  -->
<!-- 	<script type="text/javascript">
		$('.imgtable tbody tr:odd').addClass('odd');
	</script> -->
</body>
</html>
